<template>
	<view class="">
		<view class="list-box" v-if="item.styleType == 1">
			<scroll-view :scroll-x="true">
				<view class="list">
					<view class="icon" v-for="(i,index) in item.flitems" :key="index">
						<image :src="i.item.flitems" mode="widthFix"
							:class="{wintht5:item.navNumber == 5,wintht4:item.navNumber == 4,wintht3:item.navNumber == 3}">
						</image>
						<view class="text ellipsis"
							:style="{fontSize:`${item.style.fontSize}px`,color:item.style.color}">
							{{i.name}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="list-box3" v-if="item.styleType == 3">
			<view class="list">
				<view class="icon" v-for="(i,index) in item.flitems" :key="index">
					<image :src="i.icon" mode="widthFix"
						:class="{wintht5:item.navNumber == 5,wintht4:item.navNumber == 4,wintht3:item.navNumber == 3}">
					</image>
					<view class="text ellipsis" :style="{fontSize:`${item.style.fontSize}px`,color:item.style.color}">
						{{i.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="list-box2" v-if="item.styleType == 2">
			<view class="card_swiper_out">
				<scroll-view :show-scrollbar="false" :enable-flex="true" :scroll-x="true" class="card_swiper">
					<block v-if="item.flitems.length <= 10">
						<view class="scroll">
							<view class="item" v-for="(i,index) in item.flitems" :key="index"
								@click.stop="goClassiFication(i)">
								<view class="image">
									<img class="item_img" :src="i.icon" />
								</view>
								<view class="title">
									<view class="text"
										:style="{fontSize:`${item.style.fontSize}px`,color:item.style.color}">{{i.name}}
									</view>
								</view>
							</view>
						</view>
					</block>
					<block v-else>
						<view class="u-margin-bottom-26">
							<view class="scroll">
								<view class="item" v-for="(i,index) in item.flitems" v-if="index<8" :key="index"
									@click.stop="goClassiFication(i)">
									<view class="image">
										<img class="item_img" :src="i.icon" />
									</view>
									<view class="title">
										<view class="text"
											:style="{fontSize:`${item.style.fontSize}px`,color:item.style.color}">
											{{i.name}}
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="u-padding-bottom-26">
							<view class="scroll">
								<view class="item" v-for="(i,index) in item.flitems" v-if="index>8&&index<16"
									:key="index" @click.stop="goClassiFication(i)">
									<view class="image">
										<img class="item_img" :src="i.icon" />
									</view>
									<view class="title">
										<view class="text"
											:style="{fontSize:`${item.style.fontSize}px`,color:item.style.color}">
											{{i.name}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: {
			item: {
				type: Object,
				default: {}
			}
		},
		created() {
			setTimeout(() => {
				console.log(this.item)
			}, 1000)
		},
		methods: {
			goClassiFication(i) {
				if(i.link.type == '1'){
					let string = i.link.url.substring(28,31)
					uni.navigateTo({
						url: '/pages/information/list/index?id=' + string + '&type=' + 'information'
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.list-box2 {

		// 菜单
		.scroll_box {
			width: calc(100% - 48upx);
			height: 376upx;
			background: #ffffff;
			border-radius: 24upx;
			padding: 24upx;
		}

		.scroll_item {
			text-align: center;
			width: 96upx;
			color: #666666;
		}

		.scroll {
			display: flex;
		}


		.card_swiper_out {
			position: relative;
			padding-bottom: 20rpx;
			background: #FFFFFF;
			width: 100%;
			overflow-y: auto;
		}

		.card_swiper {
			white-space: nowrap;
			width: 100%;

		}

		.item {
			width: 190rpx;
			text-align: center;
			color: #767780;
			font-size: 24upx;
			margin-top: 20rpx;
		}

		.image {
			width: 190rpx;
		}

		.item_img {
			width: 90upx;
			height: 90upx;
			border-radius: 50%;
			margin-bottom: 10upx;
			font-size: 24upx;
		}

		.title {
			font-size: 24rpx;
		}

		.text {
			width: 180rpx;
			margin: 0 auto;
			word-wrap: break-word;
			word-break: keep-all;
			white-space: normal;
		}

		.scroll_bar {
			background: rgba(242, 169, 64, 0.2);
			height: 8upx;
			border-radius: 5upx;
			position: relative;
			left: 50%;
			transform: translate(-50%, 0);
			z-index: 9;
			bottom: 0;
			transition: all 0.5s ease-in;
		}

		.left_line {
			content: ' ';
			width: 24upx;
			height: 8upx;
			background: red;
			border-radius: 5upx;
			position: absolute;
			top: 0;
		}
	}

	.list-box3 {
		.list {
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx;

			.icon {
				width: 50%;
				display: flex;

				image {
					width: 145rpx;
					border-radius: 100rpx;
				}
			}

		}
	}

	.list-box {
		.list {
			display: flex;
			padding: 20rpx;

			.icon {
				margin-right: 20rpx;

				image {
					border-radius: 100rpx;
				}

				.wintht3 {
					width: 145rpx;
					margin-right: 60rpx;
				}

				.wintht4 {
					width: 145rpx;
				}

				.wintht5 {
					width: 116rpx;
				}

				.text {
					width: 145rpx;

				}
			}
		}
	}
</style>
